<meta content="text/html; charset=UTF-8; X-Content-Type-Options=nosniff" http-equiv="Content-Type" />
<style type="text/css">
    .redBorder{border: 1px solid red;}
    #comm_nominate_experts_choose_experts_list li{list-style-type:none;cursor: pointer;width: 82px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 20px;margin-left: 30px;}
	/*kendo MultiSelect CSS*/
    #comm_nominate_experts_ms_div .k-input{border: 0px;text-indent: 0px; height: 16px!important; line-height: 16px!important;}
    #comm_nominate_experts_ms_div .k-multiselect-wrap li{background-color: #C3C3C3!important; height: 22px; line-height: 22px; width: auto;}
    #comm_nominate_experts_ms_div .focusBorder{border: 1px solid #d8d8d8;}
    #comm_nominate_experts_ms_div .k-delete{margin-top: -6px; margin-right: 3px;}
    
    #comm_nominate_experts_body a{text-decoration:none;}
    #comm_nominate_experts_body .aEnable{cursor: pointer; color: #63B8FF!important;}
    #comm_nominate_experts_body .divInline{display: inline;} 
    /*#comm_nominate_experts_body .aDisable{cursor: default; color: #000000!important;}*/
</style>
<!-- <script src="js/expert.api.js"></script> -->
<div id="comm_nominate_experts_win">
	<div id="comm_nominate_experts_body" class="wp_ml_15 wp_mt_10 wp_mr_15 wp_fz_12">
        Choose the Experts (From the suggestions given)
        <div id="comm_nominate_experts_recommend_div">
            <div id="comm_nominate_experts_choose_experts_list" class="wp_w_482 left">
            </div>
            <div style="clear:both"></div>
            <a id="comm_nominate_experts_collapse_a" href="#" class="right wp_mt_10 aEnable">Collapse</a>
            <a id="comm_nominate_experts_view_more_a" href="#" class="right wp_mt_10 aEnable wp_mr_10">View More</a>
            <div style="clear:both"></div>
        </div>

        <div class="wp_mt_10">Nominate Experts</div>

		<div id="comm_nominate_experts_ms_div" class="wp_mt_10">
			<input id="comm_nominate_experts_ms_input" style="width: 482px;" class="wp_mt_5" />
		</div>
	    <div class="wp_fz_10">Enter User ID / Name</div>
    </div>
    <button id="comm_nominate_experts_submit_btn" class="k-button wp_w_50 wp_h_20 right wp_fz_11 wp_mt_10 wp_mb_10 wp_mr_15">Submit</button>
</div>

<script type="text/x-kendo-template" id="comm_nominate_experts_win_template">
    <div class="wp_h_20 wp_w_120 wp_mt_10 left">
        #var ml = '-24px', borwserType = Workport.getBrowser();#
        #if (borwserType == 'chrome') {#
            #ml = '-5px';#
        #} else if (borwserType == 'ie10' || borwserType == 'ie11' || borwserType == 'ipad') {#
            #ml = '-5px';#
        #}#
            <img src="imgs/choose.png" alt="" style="position:absolute;margin-left: #: ml #;margin-top: -4px; display: none;">
        <img src="#: data.UserImageUrl #" class="wp_w_20 wp_h_20 left" onerror="this.src='imgs/20x20.png'" onclick="commSelectStaffWinFunc.expertsImgClicked(this)" style="cursor: pointer">
        <span style="display: none;">#: data.UserId #</span>
        <li class="wp_ml_30" title="#: data.UserName #" style="width: 82px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; line-height: 20px;" onclick="homepageProfileWin.user_info_win_create('#: data.UserId #')">#: data.UserName #</li>
    </div>
</script>

<script type="text/javascript">
    var useragent = Workport.getBrowser();
	var commSelectStaffWinFunc = (function () {
		var winDiv = $('#comm_nominate_experts_win'), expertsIdsStr, winTitle = 'Nominate Experts', scrollElem = $("#comm_nominate_experts_body"), msDiv, collapseA, viewMoreA, submitBtn, recommendList, notificationId, targetId, tags, callbackFun, originalHtml = winDiv.html(), win, expertsIdsArray, scrollFlag, pn, oldHeight, divNum, lastDataFalg, loaderContent = {position:'center', imgColor:'white', textCSS:{'color':'white'}, boxCSS:{'opacity':'1'}}, loader, msInput;

        winDiv.kendoWindow({width: '512px', title: winTitle, minHeight: 100, maxHeight: 530, modal: true, visible: false, resizable: false, draggable: false, actions:["Close"], 
            close: function () {
                winDiv.empty();
                winDiv.html(originalHtml);
            }
        });

        function init () {
            var expertsEEObj = {ids: [], names: [], idsStr: ""}, expertsMSObj;

            msInput = $("#comm_nominate_experts_ms_input");
            msDiv = $("#comm_nominate_experts_ms_div");
            expertsMSObj = {msElem: msInput, msDiv: msDiv};
            scrollFlag = false;
            Workport.MultiSelectFunc.createMultiSelect(expertsMSObj, expertsEEObj, getExpertsIdsStr, function() {loader.show();}, function() {loader.hide();});

            recommendList = $("#comm_nominate_experts_choose_experts_list");
            submitBtn = $("#comm_nominate_experts_submit_btn");
            submitBtn.click(btnClick);
            collapseA = $("#comm_nominate_experts_collapse_a");
            viewMoreA = $("#comm_nominate_experts_view_more_a");
            viewMoreA.click(viewMoreClicked);
            collapseA.click(collapseClicked);

            expertsIdsArray = "";
            expertsIdsStr = "";
            pn = 1;
            divNum = 1;
            oldHeight = 30;
            lastDataFalg = false;
            
            collapseA.hide();
            viewMoreA.hide();
        }

        function collapseClicked () {
            oldHeight = recommendList.height();
            recommendList.find("div.collapseFlag").hide();
            recommendList.css("height", "30");
            collapseA.hide();
            viewMoreA.show();
            win.center();
        }

        function viewMoreClicked () {
            if (oldHeight > 30) {
                recommendList.find("div.collapseFlag").show();
            }
            recommendList.css("height", 'auto');
            if (!lastDataFalg) {
                getExperts();
            } else {
                collapseA.show();
                viewMoreA.hide();
                win.center();
            }
        }
		
        function getExperts () {
            loader.show();         
            Workport.ExpertsAPI.getExperts(function (data) {
                loader.hide();
                if (data) {
                    if (data.ResponseCode == "WP1005") {
                        viewMoreA.hide();
                        lastDataFalg = true;
                    } else if (data.ResponseCode == "WP1001" && pn == 2) {
                        viewMoreA.show();
                    }
                    if (data.Experts) {
                        if (2 < pn && collapseA.is(":hidden")) {
                            collapseA.show();
                        }
                        
                        render(data.Experts);
                        win.center();

                        if (!scrollFlag && scrollElem.height() > 540) {
                            scrollElem.slimScroll({wheelStep: 20, height: '540px', disableFadeOut:true, scrollTo: '540px'});
                            scrollFlag = true;
                        }
                    }
                }
            }, {tag: $.param({key: tags}).substring(4), ps: 4, pn: pn++, sync: false});
        }

        function btnClick () {
            var array, len, ids, idsSelected = expertsIdsArray;

            if (!expertsIdsStr && !expertsIdsArray) {
                Workport.utils.alertMsg(winTitle, "Please select a valid expert.", function(_data){});
                return;
            }
            if (expertsIdsStr && expertsIdsStr.indexOf(WP_USER_ID) > -1) {
                var _elem = msDiv.find(".k-multiselect-wrap");
                _elem.kendoTooltip({
                    content: "You cannot nominate yourself as an expert.",
                    position: "right",
                    hide: function() {
                        _elem.data('kendoTooltip').destroy();
                    }
                });
                _elem.data('kendoTooltip').show();

                return;
            }
            if (expertsIdsStr) {
                ids = expertsIdsStr;
            }
            if (idsSelected) {
                idsSelected = idsSelected.substr(0, idsSelected.length - 1);
                if (ids) {
                    array = idsSelected.split(";");
                    len = array.length;
                    for (var i = 0; i < len; i++) {
                        if (-1 == ids.indexOf(array[i])) {
                            ids = ids + ";" + array[i];
                        }
                    }
                } else {
                    ids = idsSelected;
                }
            } 
            loader.show(); 
            Workport.CommunityAPI.nominate(function (data) {
                loader.hide();
                if (data.ResponseCode != "WP1022") {
                    Workport.utils.alertMsg(winTitle, data.ResponseMessage, function(_data){});
                    return;
                }
                if (callbackFun) {
                    callbackFun();
                }
                winDiv.data("kendoWindow").close();
            },{notificationId : notificationId, targetId : targetId, exports : ids, tags: tags});
        };

        function getExpertsIdsStr (idsStr) {
            expertsIdsStr = idsStr;
            if(useragent != 'ipad'){
                win.center();
            }

            if (!scrollFlag && scrollElem.height() > 540) {
                scrollElem.slimScroll({wheelStep: 20, height: '540px', disableFadeOut:true, scrollTo: '540px'});
                scrollFlag = true;
            }
        }

        function render (_data) {
            var tmpl = kendo.template($.trim($("#comm_nominate_experts_win_template").html())), arr = [];
            
            $.map(_data, function(_elem) {
                var newElem = tmpl(_elem), index;
                if (divNum++ > 4) {
                    index = newElem.indexOf("left")
                    newElem = newElem.substring(0, index) + " collapseFlag " + newElem.substring(index);
                }
                arr.push(newElem);
            });
            $(arr.join('')).appendTo(recommendList);
        }

    	return {
            open : function (_notId, _targetId, _tags, _cb) {
                notificationId = _notId;
                targetId = _targetId;
                tags = _tags;
                callbackFun = _cb;
                loader = new Workport.Loader(winDiv, loaderContent);

                init();
                getExperts();

                win = winDiv.data("kendoWindow");
                win.center();
                win.open();

                if (scrollElem.height() > 540) {
                    scrollElem.slimScroll({wheelStep: 20, height: '540px', disableFadeOut:true, scrollTo: '540px'});
                    scrollFlag = true;
                }

                $($("#comm_nominate_experts_win_wnd_title").next().find("span.k-i-close")).attr("id", "comm_nominate_experts_win_close_icon");
            }
            , expertsImgClicked : function (_elem) {
                var _prevElem = $(_elem).prev(), val = $(_elem).next().text().toUpperCase() + ";";
                if (_prevElem.is(':hidden')) {
                    _prevElem.css("display","");
                    expertsIdsArray = expertsIdsArray + val;
                } else {
                    _prevElem.hide();
                    expertsIdsArray = expertsIdsArray.replace(val, "");
                }
            }
        };
	})();
</script>